<template>
  <div class="r-Box">
    <div class="r-l">
      <!-- 左侧登录区 -->
      <aside class="login-side">
        <div class="login-wrapper">
          <h2>已有账号？</h2>
          <p>点击下方按钮快速登录</p>
          <button class="login-btn" @click="goLogin">登录</button>
        </div>
      </aside>

      <!-- 右侧注册区 -->
      <main class="register-main">
        <div class="register">
          <h2>用户注册</h2>
          <form @submit.prevent="handleSubmit">
            <label>
              用户名
              <input v-model.trim="form.username" type="text" />
              <span v-if="errors.username" class="error">{{ errors.username }}</span>
            </label>

            <label>
              邮箱
              <input v-model.trim="form.email" type="email" />
              <span v-if="errors.email" class="error">{{ errors.email }}</span>
            </label>

            <label>
              密码
              <input v-model="form.password" type="password" />
              <span v-if="errors.password" class="error">{{ errors.password }}</span>
            </label>

            <label>
              确认密码
              <input v-model="form.confirmPassword" type="password" />
              <span v-if="errors.confirmPassword" class="error">
                {{ errors.confirmPassword }}
              </span>
            </label>

            <button type="submit">注册</button>
          </form>

          <div v-if="success" class="success">注册成功！正在跳转登录…</div>
        </div>
      </main>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { registerApi } from '@/api/auth'
import { ElMessage } from 'element-plus'
const router = useRouter()

const form = reactive({
  username: '',
  email: '',
  password: '',
  confirmPassword: ''
})

const errors = reactive({
  username: '',
  email: '',
  password: '',
  confirmPassword: ''
})

const success = ref(false)

function validate() {
  let valid = true
  Object.keys(errors).forEach(k => (errors[k] = ''))

  if (!form.username) {
    errors.username = '请输入用户名'
    valid = false
  }

  const emailReg = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
  if (!emailReg.test(form.email)) {
    errors.email = '邮箱格式不正确'
    valid = false
  }

  const pwdReg = /^(?=.*[0-9])(?=.*[a-zA-Z]).{8,}$/
  if (!pwdReg.test(form.password)) {
    errors.password = '密码至少8位，需包含字母和数字'
    valid = false
  }

  if (form.password !== form.confirmPassword) {
    errors.confirmPassword = '两次密码输入不一致'
    valid = false
  }

  return valid
}

async function handleSubmit() {
  if (!validate()) return
  const res = await registerApi({
    username: form.username,
    email: form.email,
    password: form.password,
    confirmPassword: form.confirmPassword
  })
  if (res.code === 200) {
    success.value = true
    setTimeout(() => router.push({ name: 'LoginPage' }), 1000)
  } else {
    ElMessage.error(res.message || '注册失败，请重试')
    errors.username = res.message || '注册失败，请重试'
  }
}
function goLogin() {
  router.push({ name: 'LoginPage' })
}

</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 全屏背景 */
.r-Box {
  min-height: 100vh;
  display: flex;
  align-items: center;
  /* 垂直居中 */
  justify-content: center;
  /* 水平居中 */
  background: url('../../img/登录注册背景图.png') center/cover no-repeat;

}

/* 居中容器：宽度 800（可按需改），flex 横向平分 */
.r-l {
  width: 100%;
  max-width: 800px;
  /* 控制整体宽度 */
  display: flex;
  border-radius: 8px;
  overflow: hidden;
  /* 圆角裁剪 */
  box-shadow: 0 4px 20px rgba(0, 0, 0, .15);
}

/* 左侧 & 右侧各占 50% */
.login-side,
.register-main {
  flex: 1 1 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 左侧登录区 */
.login-side {
  background: rgba(255, 255, 255, .35);
  backdrop-filter: blur(6px);
}

.login-wrapper {
  text-align: center;
}

/*登录按钮（左侧*/
.login-btn {
  margin-top: 16px;
  padding: 10px 40px;
  font-size: 16px;
  cursor: pointer;
  border: none;
  border-radius: 4px;
  background: linear-gradient(135deg, #71a4b9, #5a8fa0);
  color: #fff;
  transition: all .3s ease;
}

.login-btn:hover {
  background: linear-gradient(135deg, #5a8fa0, #71a4b9);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(113, 164, 185, 0.4);
}

/* 右侧注册区 */
.register-main {
  background: #fff;
}

.register {
  width: 360px;
  padding: 32px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

label {
  display: block;
  margin-bottom: 12px;
  font-size: 14px;
}

input {
  width: 100%;
  padding: 6px 8px;
  margin-top: 4px;
  box-sizing: border-box;
}

/*  注册按钮（右侧表单内） */
button[type='submit'] {
  width: 100%;
  padding: 8px;
  margin-top: 16px;
  border: none;
  border-radius: 4px;
  background: linear-gradient(135deg, #71a4b9, #5a8fa0);
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  transition: all .3s ease;
}

button[type='submit']:hover {
  background: linear-gradient(135deg, #5a8fa0, #71a4b9);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(113, 164, 185, 0.4);
}

.error {
  color: #e53935;
  font-size: 12px;
}

.success {
  color: #43a047;
  margin-top: 12px;
}
</style>
